<script lang="ts" setup>
import { KeyValues } from '../../utils/types';
import { ref } from 'vue'
import { FormInstance } from 'element-plus';
import SignatureConfig from './SignatureConfig.vue'
import AuthenticationService from './AuthenticationService.vue'

const props = defineProps<{ row: KeyValues }>()

const formRef = ref<FormInstance>()

const form = ref< KeyValues >({
  authenticationType: 'SignatureConfig'
})
</script>

<template>
  <ElDrawer title="插件配置">
    <ElForm ref="formRef" label-width="6em" label-suffix=" :" :model="form" >
      <ElFormItem label="鉴权类型" prop="authenticationType" >
        <ElRadioGroup v-model="form.authenticationType">
          <ElRadio label="SignatureConfig" :border="true">签名</ElRadio>
          <ElRadio label="AuthenticationService" :border="true">鉴权服务</ElRadio>
        </ElRadioGroup>
      </ElFormItem>
      <SignatureConfig v-if="form.authenticationType==='SignatureConfig'"></SignatureConfig>
      <AuthenticationService v-else :modelValue="{ formData: props.row.formData, isTree: props.row.isTree }"></AuthenticationService>
    </ElForm>
  </ElDrawer>
</template>
